import { Link } from "@tanstack/react-router";
import { ArrowRightIcon, CircleAlert } from "lucide-react";
import { Button } from "@/components/ui/button";

export function DefaultError({ error }: { error: Error }) {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <div className="flex max-w-4xl flex-col items-center justify-center gap-8 ">
        <div className="flex flex-col gap-4 rounded-lg border border-destructive p-4 text-destructive text-xs">
          <p>
            <CircleAlert
              className="-mt-0.5 me-3 inline-flex"
              size={16}
              aria-hidden="true"
            />
            {error.message}
          </p>
          <p>{error.stack}</p>
        </div>
        <Button variant="link" className="group">
          <Link to="/" className="flex items-center gap-2">
            <p>Go home</p>
            <ArrowRightIcon
              className="-me-1 size-4 transition-transform group-hover:translate-x-0.5"
              aria-hidden="true"
            />
          </Link>
        </Button>
      </div>
    </div>
  );
}
